<template>
	<div class="new">
		<div class="new-title">最新文章</div>
		<div class="new-carousel">
			<el-carousel height="420px" :interval="1000000" class="new-carousel-el">
				<el-carousel-item v-for="item in 4" :key="item" class="new-carousel-item">
					<blog-summary mode="pc-sm" :show-hot="true" class="new-carousel-item-blog" v-for="item in 5" :key="item"></blog-summary>
				</el-carousel-item>
			</el-carousel>
		</div>
	</div>
</template>

<script setup></script>

<style lang="scss" scoped>
	.new {
		// width: 360px;
		@include scaleWidth(360px, 330px);
		height: 485px;
		padding: 20px 13px 20px 20px;
		background-color: var(--blog-classify-bg-color);
		.new-title {
			@include font(_, 18px, 30px, 700, var(--blog-tag-text-color));
			margin-bottom: 20px;
		}
		.new-carousel {
			.new-carousel-item-blog {
				margin-bottom: 20px;
			}
		}
		&:deep(.el-carousel__indicators) {
			transform: translateX(-30%);
			width: 103%;
		}
		&:deep(.el-carousel__indicator) {
			.el-carousel__button {
				width: 35px;
				height: 4px;
				border-radius: 2px;
				background-color: rgba($color: #222222, $alpha: 0.08);
			}
			&.is-active {
				.el-carousel__button {
					background-color: var(--guide-hover-text-color);
				}
			}
		}
		&:deep(.el-carousel__container) {
			margin: 0 5px;
		}
	}
</style>
